<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>系统日志信息</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<jsp:include
	page="${pageContext.request.contextPath }/resource_path.jsp"
	flush="true" />

<style type="text/css">
.layui-input{
	width:182px; 
}
</style>
</head>
<body class="">
	<span class="layui-breadcrumb"> <a href="">首页</a> <a> <cite>系统日志信息</cite></a></span>
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"></fieldset>
	
<form class="layui-form" action="" lay-filter="searchLog">
	<div class="layui-input-inline">
		<label class="layui-form-label">操作人员</label>
	    <div class="layui-input-inline">
	      <input type="text" name="user" id="user" placeholder="请输入操作人员" autocomplete="off" class="layui-input">
	    </div>
	</div>

	<div class="layui-inline">
      <label class="layui-form-label">操作时间</label>
      <div class="layui-input-inline">

        <input type="text" class="layui-input" id="actTimeRange" placeholder=" - " autocomplete="off">
      </div>
    </div>	
	
	<div class="layui-input-inline">
		<label class="layui-form-label">业务名称</label>
	    <div class="layui-input-inline">
			<select name="acrInterface" lay-search="">
	          <option value="">请选择业务名称</option>
	            <optgroup label="代理商页面">
			  	  <option value="agnetAdd">增加代理商</option>
			  	  <option value="agnetDel">删除代理商</option>
				</optgroup>
	          	<optgroup label="角色管理页面">
			  	  <option value="">分配权限</option>
				</optgroup>
	        </select>
		</div>
	</div>
    
    <div class="layui-input-inline">
  	  <label class="layui-form-label">操作类型</label>
	    <div class="layui-input-inline">
			<select name="act" lay-search="">
	          <option value="">请选择操作类型</option>
	          <option value="all">不限</option>
	          <option value="add">增加 </option>
	          <option value="">   </option>
	        </select>
		</div>
	</div>
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="searchLog">检索</button>
    <!-- <button class="layui-btn layui-btn-normal" data-type="reload" id="search"><i class="layui-icon">&#xe615;</i>检索</button> -->
</form>	

	
    

	<!-- 表格 -->
	<table class="layui-hide" id="tableList" lay-filter="tableList"></table>

	<!-- 工具栏 -->
	<script type="text/html" id="rowToolbar">
		<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="look">查看详情</a>
	</script>

	<!-- 查看详情 -->
	<div id="look" hidden="hidden" >
		
		<table id="tableLook" lay-filter="tableLook"></table>
	</div>

<script type="text/javascript">
	var table;
	var form;
	var layer;
	var laydate;
	var actTimeRange;
	layui.use(['element','table','form','layer','laydate'],	function() {
		table = layui.table;
		form = layui.form;
		layer = layui.layer;
		laydate = layui.laydate;
		//表格刷新
		 table.render({
			elem : '#tableList'
			,url : '/json/syslog.json'//数据接口
			,height : 680
			//,url : '${pageContext.request.contextPath }/log/getList.do' //数据接口 
			,toolbar : '#toolbar'
			,page : true //开启分页
			,id:'contenttable'
			,limits:[10,20,30]
			//,where:{"name":name}
		 	,request: {   //如果无需自定义请求参数，可不加该参数
                pageName: 'page' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            ,response: {   //如果无需自定义数据响应名称，可不加该参数
                countName: 'total' //规定数据总数的字段名称，默认：count
                ,dataName: 'rows' //规定数据列表的字段名称，默认：data
            }
            ,done:function(){
    	    	$('th').css({
                    'background-color': '#009688', 'color': '#fff','font-weight':'bold',
                })
    	    }
			,cols : [[
				{
					field : 'logId'
					,title : '序号'
					,width : 80
					,fixed : 'left'
				},{
					field : 'user'
						,title : '操作人员'
						,width : 110
						,fixed : 'left'
				},{
					field : 'actType'
						,title : '操作类型'
						,width : 135
						,fixed : 'left'
				},{
					field : 'actTime'
						,title : '操作时间'
						,width : 182
						,fixed : 'left'
				},{
					field : 'acrInterface'
						,title : '业务名称'
						,width : 300
						,fixed : 'left'
				},{
					field : 'IPAdress'
						,title : 'IP地址'
						,width : 135
						,fixed : 'left'
				},{
					field : 'Browser'
						,title : '浏览器'
						,width : 135
						,fixed : 'left'
				},{
					field : 'actPram'
						,title : '操作参数'
						,width : 300
						,fixed : 'left'
				},{
					field : 'actResult'
						,title : '操作结果'
						,width : 500
						,fixed : 'left'
				}, {
					field : 'right',
					title : '操作',
					toolbar : '#rowToolbar',
					width : 150,
					align:'center'
				} // rowToolbar
			          
			       ]]
		});
		


		
		  //监听行单击事件
		  table.on('row(tableList)', function(obj){
		    var data = obj.data;
			// 渲染表格
			var str = "";
			var count = 0;
			 str+="<table lay-filter='demo'><thead><tr><th lay-data=\"{field:\'1\',width:100}\">类型</th><th lay-data=\"{field:\'4\',width:80}\">序号</th><th lay-data=\"{field:'2', width:200, sort:true}\">输入参数</th><th lay-data=\"{field:'3', width:500}\">参数值</th></tr></thead><tbody>"
			
			var keys =  Object.keys(data.actPram);
			var bcolor;
			  	for(i=0;i<keys.length;i++){
			  		str+="<tr><td>输入参数</td><td>"
			  		str+=1;
			  		str+="</td><td>"+data.actPram[keys[i]].split(":")[0]+"</td><td>"+data.actPram[keys[i]].split(":")[1]+"</td></tr>"
			  		count++;
			  	}
			  	keys=Object.keys(data.actResult);
			  	for(i=0;i<keys.length;i++){
			  		var keys1 = Object.keys(data.actResult[keys[i]]);
			  		for(j=0;j<keys1.length;j++){
				  		str+="<tr><td>输出参数</td><td>"
				  		str+=i+1
				  		str+="</td><td>"+keys1[j]+"</td><td>"+data.actResult[keys[i]][keys1[j]]+"</td></tr>"
				  		count++;
			  			
			  		}
			  	}
			  	str+=" </tbody></table>"
				
			  	document.getElementById('look').innerHTML=str;
			  	
			  //转化为动态表格
			  //转换静态表格
			   	table.init('demo', {
			  		height : 'full-70'
			  		,limit:count
			  		,even : true
			  	}); 
		     
			  layer.open({
					type:1
					,title:"查看详情"
					,content: $('#look')
					,area:['80%','100%']
					,shade:['0.3','#e2e2e2']
					,maxmin:true
					,anim:1
					,scrollbar: false
					,fixed : false
					,end:function(){
						
					},success:function(){
						
					}
			});


		  });
		
		//日期组件
		laydate.render({ 
			  elem: '#actTimeRange'
			  ,range: true //或 range: '~' 来自定义分割字符
			  ,done: function(value, date, endDate){
				  actTimeRange=value;
			  }
		});
		
		//检索事件

		 form.on('submit(searchLog)', function(data){

			table.reload('tableList', {
			  url: '${pageContext.request.contextPath }/log/syslog.do'
			  ,where: {
				  "user" : data.field.user
					,"actTime":actTimeRange
					,"acrInterface":data.field.acrInterface
					,"actType":data.field.actType
			  } 
			});
		  return false; //阻止表单跳转。
		});
		

		
	})

</script>	
</body>
</html>